<template>
    <div class="container home" v-if="home" >
        <div class="pageTop">
            <span class="city" :style="{width: cityLen +'px'}"  @click="addreSelectShow = true;">{{ cityName }}<van-icon name="arrow" /></span>
            <router-link to="search">
                <van-search placeholder="有机蔬菜，水果生鲜" :style="{width: serLen +'px'}"/>
            </router-link> 
        </div>
        <van-swipe :autoplay="3000" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in home.banners" :key="index">
                <!-- <router-link v-if="item.linkType=='detail'" :to="{path:'/class/goods/detail', query:{'id': item.id}}" class="link">           
                    <img :src="item.img" />
                </router-link> -->
                <router-link :to="{path: `/class/`+item.id, query:{'type':'banner'}}" class="link">            
                    <img :src="item.img" />
                </router-link>
            </van-swipe-item>
        </van-swipe>
        <div class="types">
            <van-row>
                <van-col span="6" v-for="(item, index) in home.models" :key="index">
                    <router-link :to="{path: `/class/`+item.id, query:{'type':'model'}}" class="link" v-if="item.linkType != 'h5'">
                        <img :src="item.img" alt="">
                        <span>{{ item.name }}</span>
                    </router-link> 
                    <a :href="item.value" class="link" v-else>
                        <img :src="item.img" alt="">
                        <span>{{ item.name }}</span>
                    </a> 
                </van-col>
            </van-row>
        </div>
        <div class="modules">
            <div class="module" v-for="(item, index) in home.activitys" :key="index">
                <router-link :to="{path: `/class/`+item.id, query:{'type':'activity'}}" class="link">
                    <img :src="item.img" alt="">
                </router-link>
            </div>
        </div>
        <div class="adverts">
            <router-link v-for="(item, index) in home.advert" :to="{path: `/class/`+item.id, query:{'type':'advert'}}" class="advert" :key="index">            
                <img :src="item.img" />
            </router-link>
        </div>
        <div class="goods_list" v-show="goodsAdvice.length">
            <van-row>
                <van-col span="8" v-for="(item, index) in goodsAdvice" :key="index">
                    <div class="goods" >
                        <router-link :to="{path:'/class/goods/detail', query:{'id': item.id}}" class="img">
                            <img :src="item.mainImage"/>
                        </router-link>
                        <div class="title">{{ item.name }}</div>
                        <div class="goods_price">
                            <span class="price">¥{{ item.price }}</span>
                            <van-icon name="cart" @click="addNum(item.mainSkuId)"/>
                        </div>
                    </div>
                </van-col>
            </van-row>
        </div>
        <!-- <a class="van-hairline van-goods-action-mini-btn" href="http://chat8.live800.com/live800/chatClient/chatbox.jsp?companyID=1011522&configID=152575&jid=8315114701" > -->
        <a class="van-hairline van-goods-action-mini-btn" href="http://wpa.qq.com/msgrd?v=3&uin=491368175&site=qq&menu=yes" >
            <i class="van-icon van-icon-chat van-goods-action-mini-btn__icon"></i>客服
        </a>  
        <van-popup v-model="addreSelectShow" position="bottom">
            <van-area :area-list="areaList" :columns-num="2" @confirm="addreSelect" @cancel="addreSelectShow = false"/>
        </van-popup>
    </div>
</template>

<script>
import areaList from '@/utils/area'
import { getHome, getHomeGoods, addGoods } from '@/api/getData'

export default {
    name: 'home',
    data() {
        return {
            cityName: '未知',
            home: null,
            goodsAdvice: [],
            areaList: areaList,
            addreSelectShow: false,
            cityLen: 0,
            serLen: 0,
        }
    },
    created() {  
        if(this.localAddress){
            this.cityName = this.localAddress.replace('市', '');
            this.cityLen = (this.cityName.length+2)*14
            this.serLen = document.body.clientWidth-this.cityLen-20;
        }    
        this.init();
    },

    methods: {

        init(){
            getHome().then(res =>{
                this.home = res.data;
            }).catch(err =>{})

            getHomeGoods().then(res =>{
                this.goodsAdvice = res.data.data.list;
            }).catch(err =>{})
        },

        addreSelect(str) {           
            this.cityName = str[1].name.replace('市','');
            if(str[0].name == '北京市' || str[0].name == '天津市' || str[0].name == '上海市' || str[0].name == '重庆市'){
                this.cityName = str[0].name.replace('市','');
            }
            this.cityLen = (this.cityName.length+2)*14;
            this.serLen = document.body.clientWidth-this.cityLen-20;
            this.addreSelectShow = false;
        },

        addNum(skuId) {
            let info = this.$store.state.goods.useInfo;
            if(!info.token){
                this.$router.push('/login');
                return;
            }
            info.skuId = skuId;
            addGoods(info).then(res =>{
                this.$toast('已为你添加至购物车');
            }).catch(err =>{
                this.$toast(err.msg);
            })
        },
    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
@import '@/styles/color.scss';
.home{
    margin-bottom: 2rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .pageTop{
        position: relative;
        height: 1.2rem;
        >a{
            display: inline-block;
        }
        .van-search{
            width: 80%;
            height: .8rem;
            position: absolute;
            right: 20px;
            top: .2rem;
            padding: 0;
            border-radius: 20px;
            .van-icon-search{
                left: 13px;
            }
            .van-cell{
                border-radius: 20px;
                background-color: rgb(242, 242, 242);
                padding-left: 35px;
            }
            input{
                height: .8rem;
            }
        }
        .city{
            font-size: 14px;
            width: 15%;
            height: 100%;
            display: flex;
            justify-content:center;
            align-items:Center;
        }
        .van-icon-arrow{
            transform: rotate(90deg);
            margin-left: 4px;
        }
    }
    .van-swipe{
        width: 100%;
        height: 3.9rem;
        .van-swipe-item{
            position: relative;
            .link{
                position: absolute;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }   
        }      
    }
    .types{
        text-align: center;
        margin-bottom: 15px;
        .van-row{
            height: 100%;
            .van-col{
                position: relative;
                height: 2rem;
                top: 16px;
                margin-bottom: 30px;
                .link{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0px;
                    left: 0px;
                    color: $color;
                    img{
                        width: 60px;
                        height: 60px;
                    }
                    span{
                        display: block;
                        margin-top: 4px;
                    }
                }
            }
        }
    }
    .modules{
        clear: both;
        margin: 0 .2rem;
        .module{
            position: relative;
            height: 2.2rem;
            float: left;
            width: 48%;
            margin: 0 1%;
            border-radius: 4px;
            background: $background;
            margin-bottom: 5px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .adverts{
        margin: 10px 0 0;
        clear: both;      
        padding-top: 5px;
        height: 2.7rem;
        border-bottom: 10px solid $background;
        .advert{
            display: inline-block;
            width: 100%;
            height: 100%;
            img{
                height: 100%;
                width: 100%;
            }
        }    
    }
    .goods_list{
        background-color: $background;
        padding-bottom: 20px;
        .van-row{
            margin: 0 10px;
        }
        .van-col{
            height: 3rem;
            margin-bottom: 20px;
        }
        .goods:nth-child(2n-1){
            border-left: 1px solid $background;
        } 
        .goods{
            padding: 10px 10px 0;
            position: relative;
            background-color: #fff;
            border-bottom: 1px solid $background;
            .img{
                position: relative;
                width: 2rem;
                height: 2rem;
                left: 50%;
                margin-left: -.9rem;
                img{
                    width: 70px;
                    height: 70px;
                }
            }
            .title{
                font-size: 12px;
                color: #999;
                margin: 4px 0;
            }
            .goods_price{
                text-align: left;
                padding: 5px 0;
                .price{
                    color: $price_color;
                }
                .van-icon-cart{
                    float: right;
                    width: 20px;
                    height: 20px;
                }
                .van-icon-cart:before{
                    color: red;
                }
            }
        }
    }
    .van-hairline{
        min-width: auto;
        width: 40px;
        height: 40px;
        background: #f3f3f3;
        border-radius: 50%;
        padding: 10px;
        position: fixed;
        right: 2px;
        bottom: 5rem;
        border: none;
    }
    .van-goods-action-mini-btn::after{
        border: none;
    }
}
</style>
